(function($){
	$(window).load(function(){
		var 
			oSpan=$('span'),
			oSmall=$('.small'),
			oBig=$('.big'),
			oSmallImg=$('.small img'),
			oBigImg=$('.big img'),
			oSpanW=oSpan.width(),
			oSpanH=oSpan.height(),
			oSmallImgW=oSmallImg.width(),
			oSmallImgH=oSmallImg.height();
		oSmall.mouseover(function(){
			oSpan.css('display','block');
			oBig.css('display','block');
		}).mouseout(function(){
			oSpan.css('display','none');
			oBig.css('display','none');
		}).mousemove(function(e){
			var 
				e=e||event,
				eX=e.clientX,
				eY=e.clientY,
				smallLeftDis=(oSmall.outerWidth()-oSmallImgW)/2,//6
				smallTopDis=(oSmall.outerHeight()-oSmallImgH)/2,//6
				spanLeft=eX-oSmallImg.offset().left-oSpan.width()/2-smallLeftDis,
				spanTop=eY-oSmallImg.offset().top-oSpan.height()/2-smallTopDis;
			if(spanLeft<=0){
				spanLeft=smallLeftDis;
			}else if(spanLeft>oSmallImgW+smallLeftDis-oSpanW){
				spanLeft=oSmallImgW+smallLeftDis-oSpanW;
			}
			if(spanTop<=0){
				spanTop=smallTopDis;
			}else if(spanTop>oSmallImgH+smallTopDis-oSpanH){
				spanTop=oSmallImgH+smallTopDis-oSpanH;
			}
			oSpan.css({left:spanLeft,top:spanTop});
			var 
				perX=(spanLeft-smallLeftDis)/(oSmallImgW-oSpanW),
				perY=(spanTop-smallTopDis)/(oSmallImgH-oSpanH),
				oBigW=oBig.width(),
				oBigH=oBig.height(),
				oBigImgW=oBigImg.width(),
				oBigImgH=oBigImg.height(),
				oBigLeft=perX*(oBigW-oBigImgW),
				oBigTop=perY*(oBigH-oBigImgH);	
			oBigImg.css({
				left:oBigLeft,
				top:oBigTop
			});
		});
		$('.list img').each(function(i){
			$('.list img').eq(i).click(function(){
				var count=2*(i+1)-1;
				$('.small img').attr('src','img/'+count+'.jpg');
				$('.big img').attr('src','img/'+(count+1)+'.jpg');
			})
		});
	});
})(jQuery);
